<template>
	<view class="shangpinshangjia">
		<view class="top">
			<image src='../../static/businessImg/back.png' class="topback" @click="back">
			</image>
			<view class="topname">
				{{data.name}}
			</view>
		</view>


		<view class="swiper_view">
			<u-swiper :list="imgList" height='750' img-mode="scaleToFill"></u-swiper>
		</view>


		<view class="shangpinshangjiacenter">
			<view class="title">
				{{data.name}}
			</view>

			<view class="biaoqian">
				{{data.status == 0 ? '已上架' : data.status == -1 ? '已下架' : '已售罄'}}
			</view>

			<view class="priceandnum">
				<view class="price">
					￥ {{data.price}}
				</view>
				<view class="num">
					已售{{data.sellNum || 0}}件
				</view>
			</view>

			<view class="line">

			</view>


			<view class="kucun">
				<view class="kucunleft">
					库存
				</view>
				<view class="kucunright">
					{{data.stockNum}}
				</view>
			</view>

			<view class="kucun" v-for="item in data.specifications">
				<view class="kucunleft">
					规格
				</view>
				<view class="kucunright">
					{{item.name}}
				</view>

				<view class="kucunleft">
					佣金价格
				</view>

				<view class="kucunright">
					￥{{item.commission}}
				</view>
			</view>


			<view class="kucun">
				<view class="kucunleft">
					商品参数
				</view>
				<view class="kucunright">
					{{data.parameter}}
				</view>
			</view>


		</view>

		<view class="center">

		</view>

		<!-- 		<view class="pinglun">
			<view class="pingluntitle">
				<view class="pingluntitleleft">
					商品评价(16)
				</view>
				<view class="pingluntitleright">
					全部 <span class="accrow"></span>
				</view>
			</view>

			<view class="pinglunlist">
				<view style="display: flex;">
					<view class="pinglunlisticon">
						<u-image src="../../icon.png" mode="" width='100%' height="100%"></u-image>
					</view>
					
					<view class="pinglunname">
						123
					</view>
				</view>
				
				<view class="pinglunzhuti">
					超级好吃，宝宝还会回购的，肉质鲜嫩，食材都是很新鲜的，店家配送一百分！
				</view>
			</view>
			
			
		</view> -->

		<view class="shangpinxiangqing">
			商品详情
		</view>

		<view class="xiangqingtupian" v-for="item in detailImage">
			<img :src="item" mode="" style="width: 100%;"></img>
		</view>

		<view class="lastview">


			<view class="lastviewright" @click="handleGoUpt">
				添加到商品
			</view>
		</view>







		<u-popup v-model="show" mode="center" :mask-close-able="false" width="90%">
			<view class="skupopup">
				<view class="skupopuptitle">
					添加{{currentProduct.name}}到商品
				</view>


				<view class="skupopupprice">
					<view style="margin-right: 20rpx;">
						商品价格:
					</view>

					<input type="text" v-model="currentProduct.price" :disabled="true">
				</view>

				<view class="skupopupprice" v-for="item in currentProduct.specifications">
					<view style="margin-right: 20rpx;">
						{{item.name}}规格佣金:
					</view>

					<input type="text" v-model="item.commission" :disabled="true">
				</view>

				<view class="skupopupprice">
					<view style="margin-right: 20rpx;">
						商品分类:
					</view>

					<u-input v-model="currentProduct.fenlei" type="select" @click="shows = true"
						placeholder="请选择产品分类" />
				</view>

				<view class="skupopupbtn">
					<view class="skupopupadd" @click="handleAddSkuTolist">
						添加
					</view>

					<view class="skupopupadd" @click="show = false">
						取消
					</view>
				</view>

			</view>
		</u-popup>

		<u-action-sheet :list="list" v-model="shows" @click="actionSheetCallback">
		</u-action-sheet>
	</view>
</template>

<script>
	import {
		addSupplierPro,
		proDetails,
		proTypeList
	} from "@/api/storeAdmin.js";

	import storage from "@/utils/storage.js";
	export default {
		data() {
			return {
				imgList: [],
				id: "",
				data: {},
				detailImage: [],

				show: false,
				currentProduct: {},
				currentSelect: {},
				shows: false,
				list: [],
			};
		},

		onLoad(option) {
			if (option.id) {
				this.id = option.id;
			}
		},

		onShow() {
			if (this.id != "") {
				this.getDetail();
				this.proTypeList();
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1,
				});
			},

			handleGoUpt() {
				this.show = true;
				this.currentProduct = {
					...this.data,
				};
			},

			actionSheetCallback(val) {
				this.currentSelect = this.list[val];
				this.$set(this.currentProduct, "fenlei", this.list[val].name);
			},

			handleAddSkuTolist() {
				const {
					price,
					id,
					specifications
				} = this.currentProduct;
				let flag = false;
				specifications.forEach((i) => {
					if (i.price < price) {
						return (flag = true);
					}
				});

				if (flag) {
					return uni.showToast({
						title: "价格不能低于产品价格!",
						icon: "none",
					});
				}
				addSupplierPro({
					price,
					proId: id,
					specifications,
					storeId: storage.getUserInfo().storeId,
					typeId: this.currentSelect.id,
				}).then((res) => {
					if (res.code == "000000") {
						uni.showToast({
							title: "添加成功",
							icon: "none",
						});

						this.show = false;
					}
				});
			},

			proTypeList() {
				proTypeList({
					id: storage.getUserInfo().storeId,
				}).then((res) => {
					// this.list = res.data;

					let that = this;
					let obj = [];
					if (res.data != null && res.data != "" && res.data != "[]") {
						res.data.forEach((item) => {
							obj.push({
								...item,
								text: item.name,
							});
						});
					}

					this.list = obj;
				});
			},

			getDetail() {
				proDetails({
					id: this.id,
					type: "2",
				}).then((res) => {
					this.data = res.data;
					if (res.data.smallImage != "" && res.data.smallImage != null) {
						let arr = [];
						res.data.smallImage.split(",").forEach((item) => {
							arr.push({
								image: item,
							});
						});
						this.imgList = arr;
					}

					if (res.data.detailImage != "" && res.data.detailImage != null) {
						this.detailImage = res.data.detailImage.split(",");
					}
				});
			},
		},
	};
</script>

<style scoped>
	.shangpinshangjia {
		width: 100%;
		min-height: 100vh;
		background: #ffffff;
		padding-bottom: 131rpx;
	}

	.top {
		width: 100%;
		height: 188rpx;
		position: relative;
		background: #ffffff;
	}

	.topback {
		width: 16rpx;
		height: 29rpx;
		position: absolute;
		top: 106rpx;
		left: 32rpx;
	}

	.topname {
		width: 50%;
		height: 64rpx;
		text-align: center;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		font-size: 33rpx;
		color: #222222;
		line-height: 32rpx;
		position: absolute;
		top: 104rpx;
		left: 50%;
		transform: translateX(-50%);

		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.lastview {
		width: 100%;
		height: 131rpx;
		background: #ffffff;
		display: flex;
		position: fixed;
		bottom: 0;
		align-items: center;
		justify-content: space-around;
	}

	.lastviewleft {
		height: 85rpx;
		width: 84rpx;
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
		justify-content: center;
	}

	.lastviewlefttop {
		width: 47rpx;
		height: 47rpx;
		background: url("../../static/businessImg/xiajia.png") no-repeat;
		background-size: 100% 100%;
	}

	.lastviewleftbottom {
		width: 84rpx;
		height: 20rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		font-size: 21rpx;
		color: #000000;
		line-height: 20rpx;
		text-align: center;
	}

	.lastviewright {
		width: 519rpx;
		height: 85rpx;
		background: rgb(148, 207, 57);
		text-align: center;
		line-height: 85rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		font-size: 41rpx;
		color: #ffffff;
		border-radius: 50rpx;
	}

	.shangpinshangjiacenter {
		width: 100%;
		padding: 35rpx 40rpx;
		margin-top: -41rpx;
		border-radius: 30rpx 30rpx 0 0;
		position: relative;

		background: #ffffff;

		.title {
			width: 100%;
			height: 40rpx;
			font-family: PingFang;
			font-weight: bold;
			font-size: 29rpx;
			color: #151f38;
			line-height: 36rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.biaoqian {
			width: 88rpx;
			height: 32rpx;
			line-height: 32rpx;
			text-align: center;
			background: rgb(244, 250, 235);
			font-family: Adobe Heiti Std;
			font-weight: normal;
			font-size: 20rpx;
			color: #94cf39;
			margin-top: 19rpx;
		}

		.priceandnum {
			width: 100%;
			height: 34rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 19rpx;
			line-height: 34rpx;

			.price {
				width: 300rpx;
				height: 100%;
				font-family: PingFang;
				font-weight: 500;
				font-size: 23rpx;
				color: #ff3a3a;
			}

			.num {
				flex: 1;
				text-align: right;
				height: 100%;
				font-family: PingFang;
				font-weight: 500;
				font-size: 25rpx;
				color: #9da4b1;
			}
		}

		.line {
			width: 100%;
			height: 2rpx;
			background: #f9f9f9;
			margin-top: 26rpx;
		}

		.kucun {
			width: 100%;
			height: 22rpx;
			line-height: 22rpx;
			display: flex;
			align-items: center;
			margin-top: 38rpx;
		}

		.kucunleft {
			width: 150rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			font-size: 27rpx;
			color: #979797;
		}

		.kucunright {
			flex: 1;
			text-align: left;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			font-size: 27rpx;
			color: #000000;
		}
	}

	.center {
		width: 100%;
		height: 21rpx;
		background: #f9f9fb;
	}

	.pinglun {
		width: 100%;
		background: #ffffff;
		padding: 35rpx;
	}

	.pingluntitle {
		width: 100%;
		height: 28rpx;
		line-height: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.pingluntitleleft {
		width: 50%;
		height: 28rpx;
		font-family: PingFang;
		font-weight: 500;
		font-size: 27rpx;
		color: #08132a;
	}

	.pingluntitleright {
		flex: 1;
		height: 100%;
		font-family: PingFang;
		font-weight: 500;
		font-size: 25rpx;
		color: #c5c9d2;
		text-align: right;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.accrow {
			display: inline-block;
			width: 13rpx;
			height: 28rpx;
			background: url("../../static/businessImg/righticon.png") no-repeat;
			background-size: 100% 100%;
			margin-left: 10rpx;
		}
	}

	.pinglunlist {
		width: 100%;
		margin-top: 20rpx;
	}

	.pinglunlisticon {
		width: 48rpx;
		height: 48rpx;
		display: inline-block;
	}

	.pinglunname {
		height: 48rpx;
		line-height: 48rpx;
		font-family: PingFang;
		font-weight: 500;
		font-size: 27rpx;
		color: #000000;
		margin-left: 19rpx;
		display: inline-block;
	}

	.pinglunzhuti {
		width: 610rpx;
		font-family: PingFang;
		font-weight: 500;
		font-size: 25rpx;
		color: #323e46;
		line-height: 40rpx;
		margin-left: 67rpx;
	}

	.shangpinxiangqing {
		width: 100%;

		height: 30rpx;
		font-family: PingFang;
		font-weight: 500;
		font-size: 29rpx;
		color: #08132a;
		line-height: 2rpx;
		text-align: center;
		margin-top: 78rpx;
	}

	.xiangqingtupian {
		width: 100%;
		padding: 35rpx;
	}

	/deep/ .u-swiper-indicator {
		bottom: 60rpx !important;
	}

	/deep/ .u-mode-center-box {
		border-radius: 20rpx;
	}

	.popcenter {
		width: 567rpx;
		height: 267rpx;
		background: #ffffff;
		border-radius: 20rpx;
	}

	.popcenter2 {
		width: 567rpx;
		height: 450rpx;
		background: #ffffff;
		border-radius: 20rpx;
	}

	.pop_title {
		width: 100%;
		text-align: center;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 35rpx;
		color: #151f38;
		padding-top: 47rpx;
	}

	.pop_bottom_list {
		width: 100%;
		display: flex;
		height: 86rpx;
		justify-content: space-around;
		align-items: center;
		margin-top: 65rpx;
	}

	.pop_bottom_list_quxiao {
		background: rgb(246, 247, 250);
		width: 237rpx;
		height: 86rpx;
		line-height: 86rpx;
		text-align: center;
	}

	.pop_bottom_list_queren {
		width: 237rpx;
		height: 86rpx;
		line-height: 86rpx;
		text-align: center;
		background: rgb(234, 245, 215);
		color: #94cf39;
	}

	.pop_cneter {
		width: 501rpx;
		height: 94rpx;
		background: rgb(246, 247, 250);
		margin: 0 auto;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.pop_cneter_label {
		width: 122rpx;
		height: 27rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		font-size: 28rpx;
		color: #10132a;
		line-height: 27rpx;
	}

	.pop_cneter_input {
		width: 303rpx;
		height: 27rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid;

		input {
			height: 27rpx;
			font-size: 28rpx;
		}
	}

	.skupopup {
		width: 100%;
		padding: 30rpx;
	}

	.skupopupprice {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
	}

	.skupopupbtn {
		width: 100%;
		height: 58rpx;
		margin-top: 30rpx;

		display: flex;
		align-items: center;
		justify-content: space-around;

		.skupopupadd {
			text-align: center;
			width: 30%;
			height: 100%;
			line-height: 58rpx;
			border-radius: 29rpx;
			background: rgb(132, 194, 87);
			color: #ffffff;
		}
	}
</style>
